<template>
  <div>
    <!-- hxcy主页面容器container -->
    <div class="container hxcy-main">
      <!-- 华西产业第一块开始 -->
      <div class="main1 mg50">
        <div class="wrap">
          <div class="backIndex">
            <a href="#">首页</a>
            >
            <a href="#">华西产业</a>
          </div>
          <div class="showhxcy">
            <div class="tit">华西产业</div>
          </div>
        </div>
      </div>
      <!-- 华西产业第一块结束 -->
      <!-- 华西产业第二块开始 -->
      <div class="main2 mg50">
        <div class="wrap">
          <div class="bg1"></div>
          <div class="textbox">
            <div class="text">
              <div class="middle-ct">
                <div class="tit">华西产业</div>
                <div class="desc">
                  华西产业为医院下属各投资企业的统称，业务涵盖：药品、医疗器械、医药制剂销售、对外投资运营等内容。现有三家一级公司，分别为：四川华西健康科技有限公司、成都利康实业责任有限公司、成都华西海圻医药科技有限公司。
                </div>
              </div>
            </div>
            <!-- 轮播图 -->
            <div class="focus">
              <div class="slick-mod">
                <swiper class="swiper" :options="swiperOption">
                  <swiper-slide>
                    <img src="/img/hxcy/lunbo1.jpg" alt="" />
                    <div class="tit">成都利康实业有限责任公司</div>
                  </swiper-slide>
                  <swiper-slide>
                    <img src="/img/hxcy/lunbo2.jpg" alt="" />
                    <div class="tit">四川华西健康科技有限公司</div>
                  </swiper-slide>
                  <swiper-slide>
                    <img src="/img/hxcy/lunbo3.jpg" alt="" />
                    <div class="tit">成都华西海圻医药科技有限公司</div>
                  </swiper-slide>
                  <div class="swiper-button-prev" slot="button-prev"></div>
                  <div class="swiper-button-next" slot="button-next"></div>
                </swiper>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 华西产业第二块结束 -->
      <!-- 华西产业第三块开始 -->
      <div class="main3 mg50">
        <div class="wrap">
          <div class="focus">
            <div class="inner">
              <div class="slick-mod">
                <div class="slick-list">
                  <div class="slick-track">
                    <div class="slick-slide">
                      <div>
                        <div class="slick-item">
                          <a href="#">
                            <div class="inner1">
                              <div class="tit">
                                成都华西天使酒店管理有限责任公司
                              </div>
                            </div>
                          </a>
                        </div>
                        <div class="slick-item">
                          <a href="#">
                            <div class="inner1">
                              <div class="tit">
                                成都华西天使酒店管理有限责任公司
                              </div>
                            </div>
                          </a>
                        </div>
                      </div>
                      <div>
                        <div class="slick-item">
                          <a href="#">
                            <div class="inner1">
                              <div class="tit">
                                成都华西天使酒店管理有限责任公司
                              </div>
                            </div>
                          </a>
                        </div>
                        <div class="slick-item">
                          <a href="#">
                            <div class="inner1">
                              <div class="tit">
                                成都华西天使酒店管理有限责任公司
                              </div>
                            </div>
                          </a>
                        </div>
                      </div>
                      <div>
                        <div class="slick-item">
                          <a href="#">
                            <div class="inner1">
                              <div class="tit">
                                成都华西天使酒店管理有限责任公司
                              </div>
                            </div>
                          </a>
                        </div>
                        <div class="slick-item">
                          <a href="#">
                            <div class="inner1">
                              <div class="tit">
                                成都华西天使酒店管理有限责任公司
                              </div>
                            </div>
                          </a>
                        </div>
                      </div>
                      <div>
                        <div class="slick-item">
                          <a href="#">
                            <div class="inner1">
                              <div class="tit">
                                成都华西天使酒店管理有限责任公司
                              </div>
                            </div>
                          </a>
                        </div>
                        <div class="slick-item">
                          <a href="#">
                            <div class="inner1">
                              <div class="tit">
                                成都华西天使酒店管理有限责任公司
                              </div>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="arrowbox">
                <div class="center"></div>
              </div>
            </div>
          </div>
          <div class="textbox">
            <div class="middle">
              <div class="middle-ct">
                <div class="text">
                  <div class="tit">四川华西健康科技有限公司</div>
                  <div class="desc">
                    四川华西健康科技有限公司（简称华西健康），系四川大学华西医院下属的国有资本经营管理平台，由国家卫健委批准、四川大学华西医院组建并全额投资。公司成立于1999年，注册资本1900万元，前身为天使宾馆，2016年重新改组为华西医院对外投资合作产业平台企业——四川华西健康科技有限公司。
                    <br />
                    <br />
                    公司主要从事华西医院原投资公司的归口管理和作为投资运营平台，运作、管理华西医院的各类对外投资项目。
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="bg1"></div>
        </div>
      </div>
      <!-- 华西产业第三块结束 -->
      <!-- 华西产业第四块开始 -->
      <div class="main4 mg50">
        <div class="wrap">
          <div class="focus">
            <div class="inner">
              <div class="slick-mod">
                <div class="slick-list">
                  <div class="slick-track">
                    <div class="slick-slide">
                      <div>
                        <div class="slick-item">
                          <a href="#">
                            <div class="inner1">
                              <div class="tit">成都武侯利康医院(2021...</div>
                            </div>
                          </a>
                        </div>
                        <div class="slick-item">
                          <a href="#">
                            <div class="inner1">
                              <div class="tit">成都武侯利康医院(2021...</div>
                            </div>
                          </a>
                        </div>
                      </div>
                      <div>
                        <div class="slick-item">
                          <a href="#">
                            <div class="inner1">
                              <div class="tit">成都武侯利康医院(2021...</div>
                            </div>
                          </a>
                        </div>
                        <div class="slick-item">
                          <a href="#">
                            <div class="inner1">
                              <div class="tit">成都武侯利康医院(2021...</div>
                            </div>
                          </a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="textbox">
            <div class="middle">
              <div class="middle-ct">
                <div class="text">
                  <div class="tit">成都利康实业有限责任公司</div>
                  <div class="desc">
                    成都利康实业有限责任公司（简称利康公司）成立于2000年1月30日，注册资本5000万元，为四川大学华西医院全资公司。
                    <br />
                    <br />
                    本部坐落于成都市高新区益新大道288号石羊工业园3号楼3楼，经营面积1500余平方，主营业务有：医疗器械Ⅰ至Ⅲ类的批发和零售，保健品、消毒用品等产品的销售和房屋租赁等其他业务。公司下设采购部、仓储部、质管部、批发部、零售部、财务部、办公室等职能管理部门。
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 华西产业第四块结束 -->
      <!-- 华西产业第五块开始 -->
      <div class="main5 mg50">
        <div class="wrap">
          <div class="tit">
            <span>新闻公告</span>
            <a href="#">查看更多</a>
          </div>
          <div class="yygg1">
            <div class="list">
              <div class="item">
                <a href="#">
                  <span class="s1"> 产业支部召开2021年党外人士座谈会 </span>
                  <span class="s2">2021.11.18</span>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <span class="s1"> 产业支部召开2021年党外人士座谈会 </span>
                  <span class="s2">2021.11.18</span>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <span class="s1"> 产业支部召开2021年党外人士座谈会 </span>
                  <span class="s2">2021.11.18</span>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <span class="s1"> 产业支部召开2021年党外人士座谈会 </span>
                  <span class="s2">2021.11.18</span>
                </a>
              </div>
              <div class="item">
                <a href="#">
                  <span class="s1"> 产业支部召开2021年党外人士座谈会 </span>
                  <span class="s2">2021.11.18</span>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 华西产业第五块结束 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      swiperOption: {
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 812px;
  .mg50 {
    margin-left: 50px;
    margin-right: 50px;
    width: 1820px;
    margin: auto;
  }
  .main1 {
    background-image: url(/img/hxcy/blueBlock.jpg);
    height: 254px;
    .wrap {
      height: 100%;
      width: 1180px;
      margin: auto;
      // background-color: #f40;
      .backIndex {
        color: #fff;
        font-size: 14px;
        padding: 18px 0;
        a {
          text-decoration: none;
          color: inherit;
        }
      }
      .showhxcy {
        padding-top: 42px;
        color: #fff;
        text-align: center;
        .tit {
          font-size: 30px;
          line-height: 1.5;
        }
      }
    }
  }
  .main2 {
    // background-color: #fcc;
    height: 605px;
    overflow: hidden;
    .wrap {
      width: 1180px;
      height: 100%;
      margin: auto;
      background-color: chocolate;
      position: relative;
      .bg1 {
        background: url(/img/hxcy/blueBlock.jpg) repeat center 0;
        width: 1726px;
        height: 528px;
        position: absolute;
        bottom: 0;
        left: -227px;
        &::after {
          content: "";
          display: block;
          width: 289px;
          height: 322px;
          background: url(/img/hxcy/tingziLeft.png) no-repeat right bottom;
          position: absolute;
          bottom: 0;
          right: 0;
        }
      }
      .textbox {
        position: absolute;
        left: -310px;
        background: url(/img/hxcy/bgi.jpg) no-repeat center 0;
        width: 1500px;
        height: 559px;
        .text {
          display: flex;
          flex-direction: column;
          justify-content: center;
          height: 100%;
          padding-left: 320px;
          width: 520px;
          float: left;
          box-sizing: content-box;
          // background-color: cyan;
          // opacity: 1;
          .middle-ct {
            .tit {
              font-size: 32px;
            }
            .desc {
              margin-top: 14px;
              line-height: 22px;
            }
          }
        }
        .focus {
          width: 590px;
          height: 559px;
          float: right;
          position: relative;
          &::after {
            content: "";
            display: block;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: #ffffff;
            height: 46px;
          }
          .slick-mod {
            // background-color: darkgreen;
            width: 100%;
            height: 100%;
            .swiper {
              height: 100%;
              position: relative;
              .tit {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                text-align: center;
                font-size: 18px;
                color: #fff;
                padding: 24px 20px;
              }
            }
          }
        }
      }
    }
  }
  .main3 {
    // background-color: antiquewhite;
    height: 654px;
    .wrap {
      position: relative;
      width: 1180px;
      height: 100%;
      margin: auto;
      // background-color: #008c8c;
      &::before {
        content: "";
        display: block;
        background: url(/img/hxcy/whiteBlock.jpg) repeat center 0;
        width: 320px;
        height: 540px;
        position: absolute;
        bottom: 0;
        left: -320px;
      }
      &::after {
        content: "";
        display: block;
        background: #911531;
        width: 99px;
        height: 99px;
        position: absolute;
        bottom: 0;
        left: -99px;
      }
      .focus {
        width: 600px;
        height: 553px;
        position: absolute;
        top: 0;
        left: 0;
        box-shadow: 0px 0px 35px 0px rgb(0 0 0 / 10%);
        .inner {
          padding: 62px 50px 44px 50px;
          .slick-mod {
            position: relative;
            display: block;
            z-index: index 1;
            user-select: none;
            .slick-list {
              height: 388px;
              user-select: none;
              position: relative;
              display: block;
              overflow: hidden;
              z-index: 1;
              .slick-track {
                height: 100%;
                position: relative;
                top: 0;
                left: 0;
                display: block;
                opacity: 1;
                width: 500px;
                .slick-slide {
                  width: 500px;
                  display: block;
                  outline: none;
                  float: left;
                  height: 100%;
                  min-height: 1px;
                  .slick-item {
                    width: 50%;
                    display: inline-block;
                    vertical-align: middle;
                    a {
                      text-decoration: none;
                      display: block;
                      border: 1px solid #d2d2d2;
                      border-radius: 5px;
                      margin: 5px;
                      height: 85px;
                      font-size: 16px;
                      line-height: 22px;
                      overflow: hidden;
                      color: #474747;
                      .inner1 {
                        padding: 20px 26px;
                      }
                    }
                  }
                }
                &::after {
                  content: "";
                  display: block;
                  clear: both;
                }
              }
            }
          }
          .arrowbox {
            bottom: 44px;
            right: 50px;
            left: 50px;
            margin-top: 15px;
            width: auto;
            position: absolute;
            .center {
              width: 140px;
              background: #fff;
              position: relative;
              margin: 0 auto;
              height: 40px;
              z-index: 2;
            }
            &::after {
              content: "";
              border-top: 1px solid #e0e0e3;
              position: absolute;
              top: 50%;
              left: 0;
              right: 0;
            }
          }
        }
      }
      .textbox {
        background: url(/img/hxcy/redBlock.jpg) repeat center 0;
        width: 910px;
        height: 541px;
        position: absolute;
        top: 112px;
        left: 600px;
        &::after {
          content: "";
          display: block;
          width: 398px;
          height: 355px;
          background: url(/img/hxcy/redTing.png) no-repeat center 0;
          position: absolute;
          right: 0;
          bottom: 0;
        }
        .middle {
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 518px;
          padding-left: 70px;
          height: 100%;
          color: #ffffff;
          position: relative;
          z-index: 3;
          font-size: 0;
          .middle-ct {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            letter-spacing: 0;
            .tit {
              font-size: 32px;
            }
            .desc {
              text-align: justify;
              line-height: 22px;
              margin-top: 18px;
            }
          }
        }
      }
      .bg1 {
        background: url(/img/hxcy/whiteBlockM.jpg) repeat center 0;
        width: 320px;
        height: 110px;
        position: absolute;
        top: 0;
        right: -330px;
      }
    }
  }
  .main4 {
    height: 542px;
    .wrap {
      position: relative;
      width: 1180px;
      height: 100%;
      margin: auto;
      &::before {
        left: auto;
        right: -320px;
        content: "";
        display: block;
        background: url(/img/hxcy/whiteBlock.jpg) repeat center 0;
        width: 320px;
        height: 540px;
        position: absolute;
        bottom: 0;
      }
      &::after {
        left: auto;
        right: -99px;
        bottom: auto;
        top: 0;
        background: #244483;
        width: 99px;
        height: 99px;
        position: absolute;
        content: "";
        display: block;
        clear: both;
      }
      .focus {
        width: 590px;
        height: 442px;
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        position: absolute;
        box-shadow: 0px 0px 35px 0px rgb(0 0 0 / 10%);
        .inner {
          padding: 60px 41px 40px 41px;
          .slick-mod {
            z-index: 1;
            position: relative;
            display: block;
            user-select: none;
            .slick-list {
              height: 114px;
              z-index: 1;
              position: relative;
              display: block;
              overflow: hidden;
              .slick-track {
                opacity: 1;
                width: 508px;
                .slick-slide {
                  float: left;
                  height: 100%;
                  min-height: 1px;
                  display: block;
                  outline: none;
                  width: 100%;
                  .slick-item {
                    width: 50%;
                    display: inline-block;
                    vertical-align: middle;
                    a {
                      text-decoration: none;
                      width: 200px;
                      height: 45px;
                      line-height: 45px;
                      padding: 0 20px;
                      display: block;
                      border: 1px solid #d2d2d2;
                      border-radius: 5px;
                      margin: 5px;
                      font-size: 16px;
                      line-height: 22px;
                      overflow: hidden;
                      color: #474747;
                      .tit {
                        height: 44px;
                        overflow: hidden;
                        line-height: 44px;
                      }
                    }
                  }
                }
                &::after {
                  display: table;
                  content: "";
                  clear: both;
                }
              }
            }
          }
        }
      }
      .textbox {
        background: url(/img/hxcy/blueBlock.jpg) repeat center 0;
        width: 910px;
        height: 541px;
        position: absolute;
        left: auto;
        right: 590px;
        top: 0;
        .middle {
          float: right;
          padding: 0;
          padding-right: 70px;
          width: 518px;
          height: 100%;
          color: #ffffff;
          position: relative;
          z-index: 3;
          font-size: 0;
          .middle-ct {
            display: inline-block;
            vertical-align: middle;
            font-size: 14px;
            letter-spacing: 0;
            .tit {
              font-size: 32px;
            }
            .desc {
              line-height: 22px;
              margin-top: 18px;
              text-align: justify;
            }
          }
          &::after {
            content: "";
            display: inline-block;
            vertical-align: middle;
            height: 100%;
          }
        }
        &::after {
          background-image: url(/img/hxcy/tingzi.png);
          width: 343px;
          height: 375px;
          right: auto;
          left: 0;
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
        }
      }
    }
  }
  .main5 {
    background-color: tomato;
    padding: 70px 0 90px;
    background: url(/img/hxcy/whiteBlock.jpg) repeat center 0;
    .wrap {
      position: relative;
      width: 1180px;
      // height: 100%;
      margin: auto;
    }
    .tit {
      span {
        float: left;
        font-size: 32px;
      }
      a {
        text-decoration: none;
        color: inherit;
        float: right;
        background-color: transparent;
        background: #fff url(/img/hxcy/link-icon1.png) no-repeat right center;
        padding-right: 25px;
        float: right;
        margin-top: 15px;
        position: relative;
        font-size: 15px;
        &:hover {
          background-image: url(/img/hxcy/link-icon2.png);
          color: #c7a368;
        }
      }
      &::after {
        content: "";
        display: table;
        clear: both;
      }
    }
    .yygg1 {
      padding-bottom: 0;
      .list {
        margin-top: 35px;
        .item {
          box-shadow: 0px 0px 18px 0px rgb(2 2 2 / 9%);
          font-size: 16px;
          background: #fff;
          padding: 20px 24px;
          padding-right: 40px;
          a {
            display: block;
            text-decoration: none;
            color: inherit;
            .s1 {
              float: left;
              position: relative;
              padding-left: 20px;
              width: 60%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              &::after {
                content: "";
                display: block;
                width: 7px;
                height: 7px;
                border-radius: 50%;
                border: 3px solid #5a82cf;
                position: absolute;
                top: 50%;
                left: 0;
                margin-top: -6px;
              }
            }
            .s2 {
              float: right;
              font-family: Arial;
              width: 30%;
              text-align: right;
            }
            &::after {
              content: "";
              display: block;
              clear: both;
            }
          }
        }
        .item + .item {
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
